<template>
    <div id="categoryBox">
        <div id="title">
            <h3>餐品类别</h3>
        </div>
        <div id="treeBox">
            <el-tree
                :default-expand-all="true"
                :expand-on-click-node="false"
                :highlight-current="true"
                node-key="id"
                :data="data"
                :props="defaultProps"
                :render-content="renderContent" 
                ref="tree"
               >
            </el-tree>
            <span class="custom-tree-node" slot-scope="{ node, data }">
                <span>{{ node.label }}</span>
                <span>
                  <el-button
                    type="text"
                    size="mini"
                    @click="() => openAddDialog(data)">
                    添加
                  </el-button>
                  <el-button
                    type="text"
                    size="mini"
                    @click="() => remove(node, data)">
                    删除
                  </el-button>
                </span>
            </span>
        </div>
        <el-dialog
            title="提示"
            :visible.sync="centerDialogVisible"
            width="30%"
            :close-on-click-modal="false"
            :destroy-on-close="true"
            @close="closeAddDialog()"
            center>
            <el-input v-model="categoryForm.name" placeholder="请输入名称" min="2" max="6"></el-input><br /><br/>
            <el-input-number placeholder="请选择排序" v-model="categoryForm.sort" controls-position="right" :min="1" :max="30"></el-input-number>
            <span slot="footer" class="dialog-footer">
                <el-button @click="closeAddDialog()">取 消</el-button>
                <el-button type="primary" @click="append()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
let id = 0
export default {
    data() {
        return { 
            categoryForm:{
                name: '',
                sort: undefined,
                type: '',
            },
            //添加框是否打开
            centerDialogVisible: false,
            data: [],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            //存放当前节点信息
            nowTreeData:[]
        }
    },
    methods: {
        append() {
            this.categoryForm.type = this.nowTreeData.id;
            this.$axios.post("http://localhost:8888/hwy/cater/category/addCategory",this.categoryForm)
                .then((response) => {
                    this.$message({
                        message: response.data.data,
                        type: 'success',
                    });
                    this.findCategory();
                })
                .catch(function (error) {
                console.log(error)
            });
            this.closeAddDialog();
        },

        remove(node, data) {
            this.$confirm("此操作将永久删除该类别, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(()=>{
                console.log("删除的数据是："+ data)
                this.$axios.post("http://localhost:8888/hwy/cater/category/deleteCategory",data)
                    .then((response) => {
                        if (response.data.code === 1 ) {
                            this.$message({
                                message: response.data.data,
                                type: 'success',
                            });
                        } else {
                            this.$message({
                                message: response.data.msg,
                                type: 'error',
                            });
                        }
                        this.findCategory();
                    });
            }).catch(()=>{
                this.$message({
                    type: "info",
                    message: "已取消删除",
                });
            })
        },

        renderContent(h, { node, data, store }) {
            if (data.id == 0 ){//如果是顶级节点就不显示添加删除按钮
                return (
                    <span class="custom-tree-node">
                        <span>{node.label}</span>
                    </span>);
            } else if ( data.id == 1 || data.id == 2 ){//如果是次级节点，按钮全部显示
                return (
                    <span class="custom-tree-node">
                        <span>{node.label}</span>
                        <span>
                            <el-button size="mini" type="text" on-click={ () => this.openAddDialog(data) }>添加</el-button>
                            <el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>删除</el-button>
                        </span>
                    </span>);
            } else{ //其他的节点就只显示删除按钮
                return (
                    <span class="custom-tree-node">
                        <span>{node.label}</span>
                        <span>
                            <el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>删除</el-button>
                        </span>
                    </span>);
            }
        },
        //查询所有类别
        findCategory() {
            this.$axios.post("http://localhost:8888/hwy/cater/category/findCategory")
                  .then((response) => {
                    console.log(response.data.data)
                    this.data = response.data.data;
                  })
        },
        //点击添加按钮弹出弹框
        openAddDialog(data){
            this.nowTreeData = data;
            this.centerDialogVisible = true;
            console.log(this.nowTreeData)
        },
        //触发关闭,并改变发送信号量
        closeAddDialog(){
            this.centerDialogVisible = false;
            this.clearCategoryForm();
            this.nowTreeData = '';
        },
        //重置Category表单
        clearCategoryForm(){
            this.categoryForm.name = '';
            this.categoryForm.sort = undefined;
            this.categoryForm.type = '';
        },
        
    
    },
    mounted(){ 
        this.findCategory();
    }
}
</script>

<style scoped>
@import '@/assets/css/eat/category.css';
</style>